﻿<!DOCTYPE html>
<html>

<head>
  <base href="assets/bootstrap/">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <link href="bootstrap.min.css" rel="stylesheet">
  <script src="jquery.min.js"></script>
  <script src="bootstrap.min.js"></script>

  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      font-family: sans-serif;
    }

    body {
      display: flex;
      flex-direction: column;
    }

    /*** Window Title ***/

    header {
      width: 100%;
      display: flex;
      background: #bebdbd;
      font-family: Segoe UI;
      font-size: 9pt;
    }

    .title-bar {
      padding: 0.35em 0.5em;
      flex-grow: 1;
    }

    .title-btn {
      padding: 0.35em 1.0em;
      cursor: pointer;
      vertical-align: bottom;
      font-family: Webdings;
      font-size: 11pt;
    }

    .title-btn:hover {
      background: rgba(0, 0, 0, .2);
    }

    .title-btn-close:hover {
      background: #dc3545;
    }

    /*** Window Client Area ***/

    .main {
      /* Some settings for everything in the client area */
      font-size: 12pt;
      padding: 1em;
      overflow: auto;
    }

    .container {
      /* Only render items in the center 600px of the client area */
      /* max-width: 600px; */
      margin: auto;
    }

    /*** Bootstrap Style Flexbox Utilities ***/

    .row {
      /* A row is basically just a flexbox container */
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .w-50 {
      /* Fill almost half the row, leaving a bit of margin */
      width: 48%;
    }

    .w-100 {
      /* Fill the entire row */
      width: 100%;
    }

    @media screen and (max-width: 500px) {
      /* When the window gets shrunk */

      .w-50 {
        /* Reflow half-size elements to fill the entire row */
        width: 100%;
      }
    }


  </style>
</head>

<body>

  <!-- Title Bar -->
  <header>
    <span class="title-bar" onmousedown="neutron.DragTitleBar()">QuickShowDB</span>
    <span class="title-btn" onclick="neutron.Minimize()">0</span>
    <span class="title-btn" onclick="neutron.Maximize()">1</span>
    <span class="title-btn title-btn-close" onclick="neutron.Close()">r</span>
  </header>

  <!-- Main content area -->
  <div class="main">
    
    <div class="container">
      <input type="button" class="btn btn-primary" onclick="ahk.reloadTbody()" value="刷新当前页面">
      <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#execSqlModal">（谨慎）执行SQL</button>
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-info" data-toggle="modal" data-target="#aboutModal">关于</button>
      <div id="insertData">

      </div>
      <!-- 数据展示列表 -->
      <div id="listData">
        <table id="db_table_body" class="table table-striped">
          <thead></thead>
          <tbody></tbody>
        </table>
      </div>


    </div> <!-- /container -->
  </div> <!-- /main -->

  <!-- 执行SQL的页面 -->
  <div class="modal fade" id="execSqlModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="exampleModalLabel">执行SQL</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        
        <div class="modal-body">
          
          <form >
            <button type="button" class="btn btn-success" onclick="execJsSqlEvent(event)">
              <img src="play-fill.svg" alt="执行" width="32" height="32">
            </button>
            <div class="form-group">
              <textarea class="form-control" id="sql-message-text" rows="8" ></textarea>
            </div>
          </form>
        </div>

      </div>
    </div>
  </div>

  <!-- 关于的页面 -->
  <div class="modal fade" id="aboutModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">帮助&关于</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <h3>帮助</h3>
          <p>本应用的主要功能是快速查看数据</p>
          <p>如果在其他地方修改了数据库数据，可以点击刷新按钮重新加载数据</p>
          <p>以下快捷键都是鼠标焦点在程序窗口时生效</p>
          <p>ESC: 退出程序</p>
          <p>ctrl + c: 复制</p>
          <p>ctrl + v: 粘贴</p>
          <h3>关于</h3>
          <p>作者: paomian</p>
          <p>版本: V1.0.0</p>
          <p>网站: https://gitee.com/LuGuiYi</p>
        </div>
   
      </div>
    </div>
  </div>
</body>


<script>
  //按键监听
  document.onkeypress  =  function (event){
    //alert(event.keyCode)
    //ctrl + c 复制
    if (event.keyCode === 3 && event.ctrlKey) {
      document.execCommand("Copy");
    }
    //ctrl + v 粘贴
    if (event.keyCode === 22 && event.ctrlKey) {
      document.execCommand("paste");
    }
    //ctrl + A 全选
    if (event.keyCode === 1 && event.ctrlKey) {
      var element =  document.getElementById("sql-message-text");
      if (element.value != null) {
        element.select();
      }
      
    }

  }

  //显示执行SQL页面
  $('#execSqlModal').on('show.bs.modal')

  function execJsSqlEvent(event) {
    // var code = prompt("请输入SQL: ");
	  var sqlMsg = document.getElementById("sql-message-text").value;
    
    ahk.execSqlWithDB(event, sqlMsg);

    //隐藏执行SQL页面
    $('#execSqlModal').modal('hide')
  }
</script>
</html>